<template>
  <div
    class="data-statistical-container animate__faster animate__animated animate__fadeIn"
    v-loading="loading"
  >
    <!-- 材耗统计     -->
    <div class="card-view-container chart-warp">
      <div class="chart-header">
        {{ chartHeader ? chartHeader.split("@$@")[0] : "未知"
        }}<span>{{ chartHeader ? chartHeader.split("@$@")[1] : "" }}</span>
      </div>
      <div class="date-time">{{ dataTime }}</div>
      <div class="chart-body">
        <ChartView :options="chartsOpt" @rendered="rendered()"></ChartView>
      </div>
    </div>
  </div>
</template>

<script>
import { getMaterialStatistical } from "@/api/wisdom-beam/productionManage-app";
import ChartView from "@/components/ChartView";
import themeStyles from "@/theme/compileFiles/cssVaribles.less";
export default {
  components: {
    ChartView,
  },
  data() {
    return {
      loading: false,
      dataTime: "",
      dataResult: {},
      chartsOpt: {},
      chartHeader: "",
    };
  },
  mounted() {},
  methods: {
    //监听echarts渲染完成
    rendered() {
      this.loading = false;
    },
    getChartData() {
      this.loading = true;
      let {
        conditionsData: { block, mixin, engineerName, placePart, strength },
        defaultTime,
      } = this.$parent.$data;
      getMaterialStatistical({
        secCode: block,
        equCode: mixin,
        projectName: engineerName,
        placePart: placePart,
        strengthGrade: strength,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.dataResult = result;
          this.chartHeader = result.text || "";
          this.dataTime = result.subtext || "";
          if (this.$parent.$data.defaultTime.length == 0) {
            this.$parent.$data.defaultTime = [result.startTime, result.endTime];
          }
          let y = result.y ? result.y : [];
          let y2 = result.y2 ? result.y2 : [];

          let y3 = result.y3 ? result.y3 : [];

          y3.map((item) => {
            Number(item);
          });

          let yMin3 = Math.min(...y3);
          let yMax3 = Math.max(...y3);

          yMax3 = Math.ceil(yMax3) + 10;
          yMax3 = yMax3 >= 100 ? 100 : yMax3;

          this.chartsOpt = {
            color: [
              themeStyles["--echart-blue"],
              themeStyles["--echart-green"],
              themeStyles["--echart-pale-red"],
            ],
            grid: {
              left: 80,
              right: 80,
            },
            legend: {
              data: ["实际用量", "理论用量", "误差率"],
            },
            xAxis: {
              data: result.x,
            },
            yAxis: [
              {
                type: "value",
                position: "left",
                min: 0,
              },
              {
                type: "value",
                position: "right",
                min: Math.floor(yMin3),
                max: yMax3,
                axisLabel: {
                  formatter: "{value} %",
                },
              },
            ],
            series: [
              {
                yAxisIndex: 0,
                name: "实际用量",
                type: "bar",
                barMaxWidth: "40",
                data: y,
              },
              {
                yAxisIndex: 0,
                name: "理论用量",
                type: "bar",
                barMaxWidth: "40",
                data: y2,
              },
              {
                yAxisIndex: 1,
                name: "误差率",
                type: "line",
                data: y3,
                showAllSymbol: false,
              },
            ],
          };
        })
        .catch((_) => {
          this.dataTime = "";
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.data-statistical-container {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  .flex();
  flex-direction: column;
  .custom-scrollbar();
  //材料平均误差
  .material-mean-error {
    background: #fff;
    padding: 20px 0;
    &::before {
      margin: 0 20px;
    }
    .box-shadow();
    .material-error-container {
      .flex();
      padding-top: 30px;
      /deep/.ant-tabs {
        .ant-tabs-ink-bar {
          display: none !important;
        }
        .ant-tabs-bar {
          border: none !important;
          margin: 0;
        }
        .ant-tabs-tab {
          margin: 0;
          width: 200px;
          text-align: center;
          padding: 0;
          height: 90px;
          color: var(--primary-color) !important;
          cursor: default;
          .custum-tab-name {
            height: 100%;
            .flex();
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .nums {
              color: var(--primary-color);
              padding-bottom: 10px;
              font-weight: bold;
              font-size: 36px;
            }
            .tabs-name {
              color: #999;
              font-size: 14px;
            }
          }
          &::before {
            display: none;
          }
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 2px;
            height: 36px;
            background: #ededed;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
          }
          &:last-child {
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
  .card-view-container {
    width: 100%;
    &:last-child {
      margin: 0;
    }
    &.chart-warp {
      flex: 1;
      min-height: 500px;
      position: relative;
    }
    .chart-header {
      position: absolute;
      font-size: 16px;
      height: 18px;
      padding-left: 10px;
      color: #525a5d;
      display: flex;
      align-items: center;
      > span {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
      }
    }
    .date-time {
      font-size: 14px;
      color: #999;
      padding-top: 30px;
      padding-left: 12px;
    }
    .chart-body {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>
